<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="keywords" content=" " > <!--   设置一个网站的搜索关键字-->
    <meta name="description" content=" ">    <!--网站的描述内容-->
    <title>网页有些延迟时候的动画效果</title>
    <link rel="shortcut icon" href="../images/loading.jpg" type="image/jpg"> <!--设置网站小图标-->
    <link rel="stylesheet" href="../css/myStyle.css" type="text/css">
	<style>
		*{
		    padding: 0;
		    margin: 0;  /* 外边距：0; */
		}
		html,body{      /*这个不写也不影响我们的结果*/
		    width: 100%;
		    height: 1000px;
		    overflow: hidden;   /*CSS属性：溢出*/
		}
		.eat-wrap{
		    width: 200px;
		    height: 200px;
		    margin-top: 100px;
		    background-color: white;        /*这里的颜色设置成黑色是为了跟背景色融合，来使之前的圆消失,因为背景颜色默认是白色的,所以设置成白色,而如果设置了背景颜色的话,这里也要跟着变*/
		    /* 盒子的影子:(四个值的表示：) 水平方向移动大小  垂直方向 影子的模糊程度 影子的大小 颜色*/
		    box-shadow: 300px 0 0 -80px wheat,    /*这里设置的颜色不能决定豆豆的颜色*/
		    450px 0 0 -80px wheat,
		    600px 0 0 -80px wheat,
		    750px 0 0 -80px wheat;
		    border-radius: 100px;   /* 四个值都一样的时候，可以只写一个；或者用百分数表示也行（一般要想是正方形变成圆形，直接用50%就行） */
		    animation: move 1s infinite;    /* 执行动画 */       /* infinite：无限循环下去 */
		}
		.eat-wrap::before{  /* 伪元素 */         /* !!写这一行代码是注意冒号的中英文，双冒号前没有空格 !!*/
		    content: "";    /* 激活伪元素 */
		    display: block;     /* 内联-> 块 */
		    width: 200px;
		    height: 100px;
		    margin-left: 100px; /* 把大嘴往右移动，使能够产生吃豆豆到嘴里的效果 */
		    border-radius: 100px 100px 0 0;    /* 标签的四个角 从左上顺时针 */
		    background-color: navajowhite;
		    transform: rotate(-30deg);    /* css动画——2D转换 */   /* 变换：角度（单位） */
		    /*-webkit-transform: rotate(-30deg);  /* 如今都支持了！这里可以省去
		        webkit来支持Chrome 和safari浏览器
		        -ms-transform:XXX(XXX,XXX……);  支持的是IE浏览器（360）
		        -o-transform:xxx(xxx,xxx……);   支持的是Opera
		        -moz-transform:xxx();          支持firefox浏览器
		      */
		    animation: top_run 1s infinite;  /* 动画的引入 */         /* infinite：无限循环下去 */
		}
		
		.eat-wrap::after{  /* 伪元素 */
		    content: "";    /* 激活伪元素 */
		    display: block;     /* 内联-> 块 */
		    width: 200px;
		    height: 100px;
		    margin-left: 100px; /* 把大嘴往有移动，使能够产生吃豆豆到嘴里的效果 */
		    border-radius: 0 0 100px 100px ;    /* 标签的四个角 从左上顺时针 */
		    background-color:navajowhite;
		    transform: rotate(30deg);      /* 变换：角度（单位） */
		    /*-webkit-transform: rotate(30deg);*/
		    animation: bottom_run 1s infinite;   /* 动画的引入 */
		}
		
		/* 关键动画帧  -> 0% 开始 50%  中间  100%  结束 */
		@keyframes top_run {
		    0%,100%{
		        transform: rotate(-0deg);
		    }
		    50%{
		        transform: rotate(-30deg);
		    }
		}
		@keyframes bottom_run {
		    0%,100%{
		        transform: rotate(0deg);
		    }
		    50%{
		        transform: rotate(30deg);
		    }
		}
		@keyframes move {       /*嘴里豆豆的颜色由这里设置的决定*/
		    0%{
		        box-shadow: 300px 0 0 -80px antiquewhite,
		                    450px 0 0 -80px antiquewhite,
		                    600px 0 0 -80px antiquewhite,
		                    750px 0 0 -80px antiquewhite;
		    }
		    100%{
		        box-shadow: 150px 0 0 -80px antiquewhite,
		                    300px 0 0 -80px antiquewhite,
		                    450px 0 0 -80px antiquewhite,
		                    600px 0 0 -80px antiquewhite;
		    }
		}
		/* 立体文字的效果 */
		h2{
		    font-size: 110px;
		    color: white;
		    margin-left: 50px;
		    margin-top: 100px;
		    /* x,y,阴影距离，颜色 */
		    text-shadow:
		            0 0 0 black,
		            1px -1px 0 black,
		            2px -2px 0 black,
		            3px -3px 0 black,
		            4px -4px 0 black,
		            5px -5px 0 black,
		            6px -6px 0 black,
		            7px -7px 0 black,
		            8px -8px 0 black;
		}
	</style>
</head>
<body>
        <div class="eat-wrap">
        </div>
        <h2> Loading.... </h2>
</body>
</html>